<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            color: red;
        }
        p {
            width: 500px;
            border: 1px solid #e1e1e1;
        }
        a {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h3>text-align</h3>
    <ul>
        <li>
            <h4>text-align: left</h4>
            <p style="text-align: left;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.</p>
        </li>
        <li>
            <h4>text-align: center</h4>
            <p style="text-align: center;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.</p>
        </li>
        <li>
            <h4>text-align: right</h4>
            <p style="text-align: right;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.</p>
        </li>
        <li>
            <h4>text-align: start</h4>
            <p style="text-align: start;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.</p>
        </li>
        <li>
            <h4>text-align: end</h4>
            <p style="text-align: end;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.</p>
        </li>
        <li>
            <h4>text-align: justify; 值会拉伸线条，使每条线都有相等的宽度（比如报纸和杂志）。</h4>
            <p style="text-align: justify;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.</p>
        </li>
    </ul>
    <br>
    <h3>text-indent</h3>
    <ul>
        <li>
            <h4>text-indent: 2em;</h4>
            <p style="text-indent: 2em;">出因上变设者了别，谓气在蒲，秦远关力意留可承仃范狱怒弄何张身下要，国洋流将正、故绛统县清张上乐恩请。</p>
        </li>
    </ul>
    <br>
    <h3>line-heighth</h3>
    <ul>
        <li>
            <h4>固定值方式：{line-height： 20px}</h4>
            <p style="line-height: 20px;">的畴的大也是洪一德承由夫范留关关，土受定冇在护颜不天娇救榜。真王娇严承历说郭谢烦褒得如家文对妙的李。</p>
        </li>
        <li>
            <h4>百分比方式：{line-height: 130%}</h4>
            <p style="line-height: 130%;">快人兴服事同斯而也，真王娇严承历说郭谢烦褒得如家文对妙的李。真王娇严承历说郭谢烦褒得如家文对妙的李。</p>
        </li>
        <li>
            <h4>乘积因子方式：{line-height: 2}</h4>
            <p style="line-height: 2;">妙一杀人过日无不愚，负非可临色价，人仍属里了，迷学制人，予。真王娇严承历说郭谢烦褒得如家文对妙的李。</p>
        </li>
    </ul>
    <br>
    <h3>vertical-align</h3>
    <ul class="test">
        <li class="baseline">
            <h4>与基线对齐：{vertical-align: baseline}</h4>
            <p>参考内容<a href="#" style="vertical-align: baseline">基线对齐</a></p>
        </li>
        <li class="sub">
            <h4>与参考内容的下标对齐：{vertical-align: sub}</h4>
            <p>参考内容<a href="#" style="vertical-align: sub">下标对齐</a></p>
        </li>
        <li class="super">
            <h4>与参考内容的上标对齐：{vertical-align: super}</h4>
            <p>参考内容<a href="#" style="vertical-align: super">上标对齐</a></p>
        </li>
        <li class="top">
            <h4>对象的内容与对象顶端对齐：{vertical-align: top}</h4>
            <p>参考内容<a href="#" style="vertical-align: top">要对齐的内容</a></p>
        </li>
        <li class="text-top">
            <h4>对象的文本与对象顶端对齐：{vertical-align: text-top}</h4>
            <p>参考内容<a href="#" style="vertical-align: text-top">要对齐的内容</a></p>
        </li>
        <li class="middle">
            <h4>对象的内容与对象中部对齐：{vertical-align: middle}</h4>
            <p>参考内容<a href="#" style="vertical-align: middle">要对齐的内容</a></p>
        </li>
        <li class="bottom">
            <h4>对象的内容与对象底端对齐：{vertical-align: bottom}</h4>
            <p>参考内容<a href="#" style="vertical-align: bottom">要对齐的内容</a></p>
        </li>
        <li class="text-bottom">
            <h4>对象的文本与对象顶端对齐：{vertical-align: text-bottom}</h4>
            <p>参考内容<a href="#" style="vertical-align: text-bottom">要对齐的内容</a></p>
        </li>
        <li class="length">
            <h4>与基线算起的偏移量：{vertical-align: 10px}</h4>
            <p>参考内容<a href="#" style="vertical-align: 10px">偏移量对齐</a></p>
        </li>
    </ul>
</body>
</html>